<template>
  <div class="Playpopup">
    <div class="popup" @click="hides($event,2)">
      <div class="content" @click="stopPropagation">
        <p class="title">设置后台播放</p>
        <div class="ctn">
          <div class="div1">
            <p>点击右上角“<i></i>”</p>
          </div>
          <div class="div3">
            <p>
              选择“<img src="./img/icon@2x.png" alt="">”按钮
            </p>
          </div>
          <div class="div2">
            <p>直接关闭该页面<br>
              即可边聊微信边听书</p>
          </div>
        </div>
        <div class="btns">
          <btn :obj="btnstyle" :text="btntext" v-on:statr="carry"></btn>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import btn from '../../../../components/btn/index'

  export default {
    name: 'index',
    data: function () {
      return {
        btnstyle: {
          opacity: 1,
          width: '70%',
          boxShadow: '0 10px 24px 0 rgba(46, 185, 255, 0.4)'
        },
        btntext: '知道了',
      }
    },
    mounted: function () {
    },
    methods: {
      hides: function (e) {
        if (e && e.stopPropagation) {
          e.stopPropagation();
        } else {
          window.event.cancelBubble = true
        }
        this.$emit('hide')
      },
      stopPropagation: function (e) {
        if (e && e.stopPropagation) {
          e.stopPropagation();
        } else {
          window.event.cancelBubble = true
        }
        return false
      },
      carry: function () {
        this.$emit('hide')
      }
    },
    components: {btn}
  }
</script>

<style scoped>
  @import "./css/index.css";
</style>
